<div class="group">
  <table style="width: 100%; height: 40px;" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td colspan="3">
          <h2>Online .Vromerc URL</h2>
        </td>
      </tr>
      <tr><td colspan="2">&nbsp;</td></tr>
      <tr>
        <td>
          <input type="text" id="onlineVromercUrl" style="width:500px;" placeholder="// e.g: https://raw.github.com/jinzhu/configure/master/.vromerc">
          LoadEvery
          <select id="onlineVromercReloadInterval">
            <option value="15">15 Minutes</option>
            <option value="30">30 Minutes</option>
            <option value="45">45 Minutes</option>
            <option value="60">1 Hour</option>
            <option value="180">3 Hours</option>
            <option value="360">6 Hours</option>
            <option value="720">12 Hours</option>
            <option value="1440">Everyday</option>
          </select>
          <input type="submit" value="Load Now" class="saveOptions">
        </td>
      </tr>
      <tr>
        <td>
          Last updated at: <span id="onlineVromercLastUpdatedAt"></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="group">
  <table style="width: 100%; height: 40px;" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td colspan="3">
          <h2>.Vromerc Content</h2>
          (Check <a href="https://github.com/jinzhu/vrome/wiki/vromerc-example-file">example configure file</a> for possible options)
        </td>
      </tr>
      <tr><td colspan="2">&nbsp;</td></tr>
      <tr>
        <td>
          <textarea id="vromerc" style="width:600px;height:200px;" placeholder="// e.g: `map j 10j`, more please check above example file"></textarea>
        </td>
        <td>
            <img id="saved" src="/images/saved.png" width="39" style="display: none;"/>
         </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="group">
  <table style="width: 100%; height: 40px;" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td colspan="3">
          <h2>Google URL Shortener access</h2>
          With Vrome, You could use &lt;C-y&gt; to copy shortened url of current page to your clipboard.<br/>
          Granting Vrome permissions is necessary for the shortened URLs to appear on your google dashboard http://goo.gl<br/>
          You can still use the google URL shortener though
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="button" value="Grant Access" id="grantAccess" disabled>
          <input type="button" value="Revoke Access" id="revokeAccess" disabled>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<br/>
<div id="savecancelpanel">
  <button id="save" class="bluebutton saveOptions">Save</button>
  <button id="cancel" class="bluebutton closeWindow">Cancel</button>
</div>
